<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="录入餐盒" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <custom-wd-input
        required
        label="餐盒名称"
        placeholder="请输入"
        custom-input-class="text-align-right"
        placeholder-class="text-align-right"
      />
      <wd-cell
        title="图片"
        class="mt-3 rounded-lg"
        label="在手机点餐、平板点餐的点餐界面展示"
        center
      >
        <image-picker-normal class="inline-block" />
      </wd-cell>
      <wd-cell title="手机点餐端售卖" class="mt-3 rounded-lg" center>
        <wd-switch size="20px" />
      </wd-cell>
      <view class="mx-[10px] mt-6">
        <wd-text text="打印" bold size="16px" color="#333" />
      </view>
      <view class="mt-3 overflow-hidden rounded-lg">
        <wd-cell title="后厨打印" center label="如需打印后厨单，请选择对应的打印啥配置">
          <wd-switch size="20px" />
        </wd-cell>
        <custom-wd-input
          :rounded="false"
          c-class="rounded-none"
          custom-input-class="text-align-right"
          label="后厨打印档口"
          required
          placeholder="请选择打印机"
          placeholder-class="text-align-right"
        >
          <template #suffix>
            <wd-icon name="chevron-down" color="#909193" />
          </template>
        </custom-wd-input>
      </view>
      <view class="mx-[10px] mt-3 flex items-center justify-between">
        <wd-text text="关联菜品（3个）" bold size="16px" color="#333" />
        <view>
          <wd-button type="text">添加</wd-button>
        </view>
      </view>
      <view class="mt-3 rounded-lg bg-white p-[10px]">
        <wd-row class="pb-[10px]">
          <wd-col :span="14">
            <wd-text text="名称" size="12px" color="#333" />
          </wd-col>
          <wd-col :span="8">
            <wd-text text="需要餐盒数量" size="12px" color="#333" />
          </wd-col>
        </wd-row>
        <wd-row class="py-[10px]" custom-class="flex items-center">
          <wd-col :span="14">
            <wd-text text="鱼香肉丝-标准" size="12px" color="#666" />
          </wd-col>
          <wd-col :span="8">
            <custom-number-input size="12px" />
          </wd-col>
          <wd-col :span="2">
            <wd-icon name="delete" size="16px" color="#999" />
          </wd-col>
        </wd-row>
        <wd-row class="py-[10px]" custom-class="flex items-center">
          <wd-col :span="14">
            <wd-text text="鱼香肉丝-标准" size="12px" color="#666" />
          </wd-col>
          <wd-col :span="8">
            <custom-number-input size="12px" />
          </wd-col>
          <wd-col :span="2">
            <wd-icon name="delete" size="16px" color="#999" />
          </wd-col>
        </wd-row>
      </view>
      <expand-bar expand-text="售卖、点餐端展示等更多设置" collapse-text="收起更多设置">
        <view class="mx-[10px] mt-6">
          <wd-text text="售卖" bold size="16px" color="#333" />
        </view>
        <wd-cell title="售卖状态" class="mt-3 rounded-lg" center>
          <wd-switch size="20px" />
        </wd-cell>
        <wd-cell title="收银端可临时改价" class="mt-3 rounded-lg" center>
          <wd-switch size="20px" />
        </wd-cell>
        <wd-cell title="收银端可手动打折" class="mt-3 rounded-lg" center>
          <wd-switch size="20px" />
        </wd-cell>
        <custom-wd-input
          custom-class="!pb-0"
          focus-highlight
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="起售数量"
          placeholder="请输入"
          placeholder-class="text-align-right"
        >
          <template #desc>
            <wd-text text="如设置3，则需至少购买3份" color="#aaa" size="12px" />
          </template>
        </custom-wd-input>
        <custom-wd-input
          custom-class="!pb-0"
          focus-highlight
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="增量售卖数"
          placeholder="请输入"
          placeholder-class="text-align-right"
        >
          <template #desc>
            <wd-text
              text="如设置3，可配合起始数使用，首次点“+”显示起售数量，再次点击增加增售卖数量"
              color="#aaa"
              size="12px"
            />
          </template>
        </custom-wd-input>
        <view class="mx-[10px] mt-6">
          <wd-text text="点餐端设置" bold size="16px" color="#333" />
        </view>
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="菜品角标"
          placeholder="去设置"
          placeholder-class="text-align-right"
        >
          <template #suffix>
            <wd-icon name="chevron-down" color="#909193" />
          </template>
        </custom-wd-input>
        <wd-cell title="菜品描述" class="mt-3 rounded-lg" vertical>
          <wd-textarea
            :maxlength="50"
            show-word-limit
            auto-height
            no-border
            placeholder="展示在手机点餐菜品列表页"
          />
        </wd-cell>
        <wd-cell title="菜品详细描述" class="mt-3 rounded-lg" vertical>
          <wd-textarea
            :maxlength="200"
            show-word-limit
            auto-height
            no-border
            placeholder="展示在手机点餐菜品详情页"
          />
        </wd-cell>
        <view class="mx-[10px] mt-6 flex items-center justify-between">
          <wd-text text="收银端展示" bold size="16px" color="#333" />
          <wd-text text="查看收银端示例" size="12px" color="#FF3A3A" />
        </view>
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="点餐标签"
          placeholder="去设置"
          placeholder-class="text-align-right"
        >
          <template #suffix>
            <wd-icon name="chevron-down" color="#909193" />
          </template>
        </custom-wd-input>
        <view class="mx-[10px] mt-6">
          <wd-text text="其他" bold size="16px" color="#333" />
        </view>
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="数字速记码"
          placeholder="例如：001"
          placeholder-class="text-align-right"
        />
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="拼音速记码"
          placeholder="例如：zZ"
          placeholder-class="text-align-right"
        />
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="条形码"
          placeholder="请输入或扫码"
          placeholder-class="text-align-right"
        />

        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="桌台区域价格"
          placeholder="去设置"
          placeholder-class="text-align-right"
        >
          <template #suffix>
            <wd-icon name="chevron-right" color="#909193" />
          </template>
        </custom-wd-input>
        <wd-cell title="高级设置" class="mt-3 rounded-lg" label="出品部门、预估成本、保质期" center>
          <wd-text text="去设置" color="#bfbfbf">
            <template #suffix>
              <wd-icon name="chevron-right" color="#bfbfbf" size="16" />
            </template>
          </wd-text>
        </wd-cell>
      </expand-bar>
    </scroll-view>
    <view class="box-border h-[76px] flex items-center bg-white p-2">
      <wd-button
        class="flex-1 !border-1 !border-border !border-solid !text-primary"
        type="info"
        :round="false"
      >
        保存并继续添加
      </wd-button>
      <wd-button class="ml-2 flex-1" type="primary" :round="false">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
